<template>
  <el-form :inline="true" :model="form" class="demo-form-inline">
    <el-form-item label="合同标题：">
      <el-input v-model="form.ContracTitle" placeholder="请输入合同标题" clearable />
    </el-form-item>
    <el-form-item label="货主单位：">
      <el-input v-model="form.OwnerUnit" placeholder="请输入货主单位" clearable />
    </el-form-item>
    <el-form-item label="货主负责人：">
      <el-input v-model="form.OwnerName" placeholder="请输入货主负责人" clearable />
    </el-form-item>
    <el-form-item label="经办人：">
      <el-input v-model="form.HandlingName" placeholder="请输入经办人" clearable />
    </el-form-item>
    <el-form-item label="签订时间：">
      <el-date-picker v-model="form.SignedTime" type="date" placeholder="请选择输入签订时间" clearable
        value-format="YYYY-MM-DD" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit()">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="chongzhi">重置</el-button>
    </el-form-item>
  </el-form>

  <el-button type="primary" @click="pishan()"> 批量删除 </el-button>

  <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" :selectable="selectable" width="55" />
    <el-table-column label="合同ID" prop="contractId" />
    <el-table-column label="合同编号" prop="contractNumber" />
    <el-table-column label="合同标题" prop="contracTitle" />
    <el-table-column label="货主单位" prop="ownerUnit" />
    <el-table-column label="货主负责人" prop="ownerName" />
    <el-table-column label="线路" prop="line" />
    <el-table-column label="吨运价" prop="freight" />
    <el-table-column label="包车金额" prop="charterAmount" />
    <el-table-column label="签订日期" prop="signedTime">
      <template v-slot="rq">
        {{ rq.row.signedTime.substring(0, 10) }}
      </template>
    </el-table-column>
    <el-table-column label="经办人" prop="handlingName" />
    <el-table-column label="创建时间" prop="createDate">
      <template v-slot="sj">
        {{ sj.row.createDate.substring(0, 10) }} {{ sj.row.createDate.substring(11, 19) }}
      </template>
    </el-table-column>
    <el-table-column label="异常报警" prop="contractAbnormalAlarms">
      <template v-slot="yc">
        <span v-if="yc.row.contractShipmentStatus == 0">-</span>
        <span v-if="yc.row.contractShipmentStatus == 2">-</span>
        <el-tag type="success"
          v-if="yc.row.contractShipmentStatus == 1 && yc.row.contractAbnormalAlarms == 1">正常</el-tag>
        <el-tag type="danger"
          v-if="yc.row.contractShipmentStatus == 1 && yc.row.contractAbnormalAlarms == 2">异常</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="货运状态" prop="contractShipmentStatus">
      <template v-slot="zt">
        <span v-if="zt.row.contractShipmentStatus == 0">未起运</span>
        <span v-if="zt.row.contractShipmentStatus == 1">运输中</span>
        <span v-if="zt.row.contractShipmentStatus == 2">已完成</span>
      </template>
    </el-table-column>
    <el-table-column align="right">
      <template #default="scope">
        <!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          Edit
        </el-button> -->
        <el-button disabled v-if="scope.row.contractShipmentStatus == 1" type="primary" text style="width: 12px;"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        <el-button v-if="scope.row.contractShipmentStatus == 0" type="primary" text style="width: 12px;"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        <el-button v-if="scope.row.contractShipmentStatus == 2" type="primary" text style="width: 12px;"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        <el-button v-if="scope.row.contractShipmentStatus == 0" type="primary" text style="width: 12px;"
          @click="updatezhuangtai(scope.row.contractId, 1, 1)">发货</el-button>
        <el-button v-if="scope.row.contractShipmentStatus == 0" type="primary" text style="width: 12px;"
          @click="router.push('/DefinedRoute?id=' + scope.row.contractId)">定义路线</el-button>
        <el-button v-if="scope.row.contractShipmentStatus == 1" type="primary" text style="width: 12px;"
          @click="updatezhuangtai(scope.row.contractId, 3, 2)">签收</el-button>
        <el-button v-if="scope.row.contractShipmentStatus == 1" type="primary" text style="width: 12px;"
          @click="router.push('/ContractOfCarriageTracking?id=' + scope.row.contractId)">在线跟踪</el-button>

        <el-button v-if="scope.row.contractShipmentStatus == 2" type="primary" text style="width: 12px;"
          @click="">回单</el-button>
        <el-button v-if="scope.row.contractShipmentStatus == 2" type="primary" text style="width: 12px;"
          @click="router.push('/TrackRecord?id=' + scope.row.contractId)">跟踪记录</el-button>
      </template>
    </el-table-column>
  </el-table>
  <table>
    <tr>
      <td>
        <el-pagination v-model:current-page="fen.pageIndex" v-model:page-size="fen.pageSize" :page-sizes="[2, 3, 4, 5]"
          prev-text="上一页" next-text="下一页" :background="true" layout="total, slot ,sizes" :total="fen.pageRoot"
          @size-change="handleSizeChange" @current-change="handleCurrentChange">
          数据/共{{ fen.pageCount }}页
        </el-pagination>
      </td>
      <td>
        <el-pagination v-model:current-page="fen.pageIndex" v-model:page-size="fen.pageSize" :page-sizes="[2, 3, 4, 5]"
          prev-text="上一页" next-text="下一页" :background="true" layout="slot,prev, pager" :total="fen.pageRoot"
          @size-change="handleSizeChange" @current-change="handleCurrentChange">
          <el-button @click="handleCurrentChange(1)" :disabled="fen.pageIndex == 1">首页</el-button>
        </el-pagination>
      </td>
      <td>
        <el-pagination v-model:current-page="fen.pageIndex" v-model:page-size="fen.pageSize" :page-sizes="[2, 3, 4, 5]"
          prev-text="上一页" next-text="下一页" :background="true" layout=" next, slot,jumper" :total="fen.pageRoot"
          @size-change="handleSizeChange" @current-change="handleCurrentChange">
          <el-button @click="handleCurrentChange(fen.pageCount)"
            :disabled="fen.pageIndex == fen.pageCount">尾页</el-button>
        </el-pagination>
      </td>
    </tr>
  </table>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { number } from 'echarts';
const route = useRoute()
const router = useRouter()
//生命周期函数钩
onMounted(function () {
  onSubmit();
})
//查询条件字段
const form = ref({
  ContracTitle: "",
  OwnerUnit: "",
  OwnerName: "",
  HandlingName: "",
  SignedTime: ""
})
//分页条件字段
const fen = ref({
  pageIndex: 1,
  pageSize: 3,
  pageRoot: 0,
  pageCount: 0
})
//显示字段
const tableData = ref([])
//显示方法
const onSubmit = () => {
  axios.get("ContractRead/api/TraceReadContract/GetTraceContracted", {
    params: {
      ContracTitle: form.value.ContracTitle,
      OwnerUnit: form.value.OwnerUnit,
      OwnerName: form.value.OwnerName,
      HandlingName: form.value.HandlingName,
      SignedTime: form.value.SignedTime,
      pageIndex: fen.value.pageIndex,
      pageSize: fen.value.pageSize
    }
  })
    .then(res => {
      tableData.value = res.data.data.plist;
      fen.value.pageRoot = res.data.data.pageRoot;
      fen.value.pageCount = res.data.data.pageCount;
      console.log(res.data.data);
    })
}
//分页方法
const handleSizeChange = (val: number) => {
  fen.value.pageSize = val;
  onSubmit();
}
const handleCurrentChange = (val: number) => {
  fen.value.pageIndex = val;
  onSubmit();
}
//删除方法
const
  handleDelete = (index: number, row: any) => {

    ElMessageBox.confirm(
      '确定要删除嘛',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(() => {
        axios.post("Contract/api/Trace/DeleteTrace?ContractId=" + row.contractId)
          .then(res => {
            if (res.data.data > 0) {
              ElMessage.success("货主合同跟踪删除成功")
              onSubmit();
            }
            else {
              ElMessage.error("货主合同跟踪删除失败")
              return;
            }
          })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })

  }
//批量删除
const pi: any = ref([])
const handleSelectionChange = (val: any) => {
  console.log(val)
  val.forEach((a: any) => {
    pi.value.push(a.contractId);
  });
  console.log(pi.value)
}
//批量删除方法
const pishan = () => {
  if (pi.value.length == 0) {
    ElMessage.error("至少选中一项")
    return;
  }
  ElMessageBox.confirm(
    '确定要删除嘛',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      console.log(pi.value)
      axios.post("Contract/api/Trace/TraceDeletees", {
        tracelist: pi.value
      })
        .then(res => {
          if (res.data.data > 0) {
            ElMessage.success("批量删除成功")
            onSubmit();
          }
          else {
            ElMessage.error("批量删除失败")
            return;
          }
        })
    })

}
//修改状态字段
const zhuangtai = ref({
  contractId: "",
  contractAbnormalAlarms: "",
  contractShipmentStatus: ""
})
//修改状态方法
const updatezhuangtai = (contractId: any, contractAbnormalAlarms: any, contractShipmentStatus: any) => {
  //跟踪记录
  GetContracted(contractId)
  axios.post("Contract/api/Trace/UpdateTrace", {
    contractId: contractId,
    contractAbnormalAlarms: contractAbnormalAlarms,
    contractShipmentStatus: contractShipmentStatus
  })
    .then(res => {
      if (res.data.data > 0) {
        ElMessage.success("状态修改成功")

        if (contractShipmentStatus == 1) {
          AddShipmentsTrackRecord()
        } else if (contractShipmentStatus == 2) {
          AddSignForTrackRecord()
        }
        onSubmit()
      }
      else {
        ElMessage.error("状态修改失败")
        return;
      }
    })

}
//货主合同查看详情
const GetContractedinfo: any = ref({})
const GetContracted = (Id: number) => {
  axios.get('ContractRead/api/ReadContract/GetContracted', {
    params: {
      contractId: Id
    }
  }).then((ret) => {
    console.log(ret.data.data)
    GetContractedinfo.value = ret.data.data
    TRBackFillLine()
  })
}
//显示路线
const TRBackFillLinelist: any = ref([])
const TRBackFillLine = () => {
  axios.get('FoundationRead/api/Foundation/TRBackFillLine', {
    params: {
      lineName: GetContractedinfo.value.line
    }
  }).then((ret) => {
    console.log(ret.data.data)
    TRBackFillLinelist.value = ret.data.data[0]
  })
}

//跟踪记录(发货)
const ShipmentsTrackRecord = reactive({
  "contractNumber": "",
  "header": "货物已从【",
})
const AddShipmentsTrackRecord = () => {
  ShipmentsTrackRecord.contractNumber = GetContractedinfo.value.contractNumber;
  ShipmentsTrackRecord.header += TRBackFillLinelist.value.startingPoint + "】发货";
  axios.post('ContractRead/api/TrackRecord/AddShipmentsTrackRecord', ShipmentsTrackRecord).then((ret) => {
    console.log(ret.data.data)
  })
}


//跟踪记录(签收)
const SignForTrackRecord = reactive({
  "contractNumber": "",
  "header": "货物已被【",
  "consignee": "",
  "remark": "您的货物以安全送达",
})
const AddSignForTrackRecord = () => {
  SignForTrackRecord.contractNumber = GetContractedinfo.value.contractNumber;
  SignForTrackRecord.header += TRBackFillLinelist.value.terminal + "】收货";
  SignForTrackRecord.consignee = TRBackFillLinelist.value.terminal;
  axios.post('ContractRead/api/TrackRecord/AddSignForTrackRecord', SignForTrackRecord).then((ret) => {
    console.log(ret.data.data)
  })
}

</script>